<template>
    <div style="background: #fff;min-height:100vh;padding:0 20px; width: 100%">
        <div>
            <img style="width:82px;margin-left:calc(50% - 42px);margin-top:25px;margin-bottom: 10px;" src="../assets/img/logo.svg" alt="">
        </div>
        <div style="padding:20px;">
            <div style="color: #888;font-size: 12px;margin-top:25px;">邀请码</div>
            <div style="position: relative;">
                <input @focus="utils.blursCli" disabled class="inputSty" v-model="inviteCode" style="margin-top:10px;border-bottom: 1px solid #FF2E67;color:#333;" type="text" placeholder="请输入您的邀请码">
            </div>
            <div style="color: #888;font-size: 12px;margin-top:25px;">手机号</div>
            <div style="position: relative;">
                <input @focus="utils.blursCli" class="inputSty" v-model="phoneName" style="margin-top:10px;border-bottom: 1px solid #FF2E67;color:#333;" type="text" placeholder="请输入您的手机号码">
            </div>
            <div style="color: #888;font-size: 12px;margin-top:25px;">验证码</div>
            <div style="position: relative;">
                <input @focus="utils.blursCli" class="inputSty" v-model="verificationCode" style="margin-top:10px;border-bottom: 1px solid #FF2E67;color:#333;" type="text" placeholder="请输入您的验证码">
                <span v-show="showCode" style="position: absolute;right:0;top: 23px;color:#FF2E67;font-size: 14px;" @click="stempCli">获取验证码</span>
                <span v-show="!showCode" style="position: absolute;right:0;top: 23px;color:#FF2E67;font-size: 14px;">
                    {{numTime}}s 
                    <span style="color:#333;">后重新获取</span>
                </span>
            </div>
            <div>
               <button @click="registerCli" style="color:#fff;margin-top:50px;background: #FF2E67;border:none;width:100%;border-radius: 24px;height:40px;">注册</button>
            </div>
            <div style="text-align: center;color:#FF2E67;font-size: 12px;margin-top:17px;" @click="jumpDown">
                已注册？点击下载
            </div>
       </div>
       <div style="margin-top:60px;margin-bottom: 50px;display: flex;justify-content: center;width: 100%;">
            <div style="text-align: center;margin-left: -40px;">
                <van-checkbox style="display: inline-block;position: relative;top: 2px;" icon-size="15px" v-model="checked" checked-color="#FF2E67"></van-checkbox>
                <span>我已阅读并同意</span>
                <span style="color: #FF2E67;">《用户协议》</span>和
                <span style="color: #FF2E67;">《隐私政策》</span>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'registerOut',
  data () {
    return {        
        numTime:60,
        showCode:true,
        checked:false,
        phoneName:'',
        inviteCode:'',
        verificationCode:''
    }
  },
  watch: {
    phoneName(val){
        this.phoneName = val.replace(/[^0-9-]+/,'');
    }
  },
  mounted() {
      this.inviteCode=this.$route.params.id;
  },
  methods: {
    registerCli(){
        if(!this.checked){
            Toast('请先同意用户协议！');
            return
        }
        if(!this.inviteCode){
            Toast('请输入邀请码！');
            return
        }
        if(!this.phoneName){
            Toast('请输入手机号！');
            return
        }
        if(this.phoneName.length != 11){
            Toast('手机号格式错误！');
            return
        }
        if(!this.verificationCode){
            Toast('请输入验证码！');
            return
        }
        this.$http.post(this.utils.config+"/netmall/user/app/api/appRegister?phone="+this.phoneName+"&inviteCode="+this.inviteCode+"&code="+this.verificationCode).then((data)=>{
            if(data.data.success){
                Toast(data.data.result.msg);
                window.location.href = "http://www.taojinke.top/";
            }
        })
    },
    jumpDown(){
        window.location.href = "http://www.taojinke.top/";
    },
    stempCli(){
        if(!this.phoneName){
            Toast('请输入手机号！');
            return
        }
        this.showCode = false;
        var list={
            phone:this.phoneName
        };
        this.numTime = 60;
        this.$http.post(this.utils.config+"/netmall/user/app/api/sendSMS?phone="+this.phoneName,list).then((data)=>{
            })
        var setTime = setInterval(()=>{
            if(this.numTime == 1){
                clearInterval(setTime);
                this.showCode = true;
            }else{
                this.numTime--
            }
        },1000)
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .borderSty /deep/ .van-password-input__security li{
        border:none;
        border-bottom: 1px solid #FF2E67
    }
</style>
